import { placeholderArr, PlaceholderType } from './type';
import SpacingMarker from '.';
import { toFixed } from './utils';

export function createPlaceholder(
  type: PlaceholderType,
  width: number,
  height: number,
  top: number,
  left: number,
  style: CSSStyleDeclaration,
): void {
  const placeholder: HTMLElement | null = SpacingMarker.appendToEl.querySelector(`.spacing-js-placeholder-${type}`);
  if (!placeholder) return;
  const { selectedColor, targetColor } = SpacingMarker;
  const color = type === 'selected' ? selectedColor : targetColor;
  placeholder.style.border = `${1 * SpacingMarker.scale}px solid ${color}`;
  placeholder.style.width = `${width}px`;
  placeholder.style.height = `${height}px`;
  placeholder.style.top = `${top}px`;
  placeholder.style.left = `${left}px`;
  placeholder.style.display = 'block';
  // 元素有形变，显示辅助边框
  if (style.transform) {
    const deg = toFixed(style.transform.match(/rotate\((\S*)deg\)/)?.[1]);
    if (Object.is(deg, NaN)) return;
    // 旋转角度 0, 180, 360 度不显示辅助边框
    if ([0, 180, 360].some((i) => i === deg)) return;
    const subPlaceholder: HTMLElement | null = SpacingMarker.appendToEl.querySelector(
      `.spacing-js-sub-placeholder-${type}`,
    );
    if (!subPlaceholder) return;
    subPlaceholder.style.border = `${1 * SpacingMarker.scale}px dashed ${color}`;
    subPlaceholder.style.width = `${width}px`;
    subPlaceholder.style.height = `${height}px`;
    subPlaceholder.style.top = `${top}px`;
    subPlaceholder.style.left = `${left}px`;
    subPlaceholder.style.transform = style.transform;
    subPlaceholder.style.display = 'block';
  }
}

export function initPlaceholderElement(): void {
  const { zIndex } = SpacingMarker;
  placeholderArr.forEach((item: any) => {
    if (SpacingMarker.appendToEl.querySelector(`.spacing-js-placeholder-${item}`)) return;
    // 主边框
    const placeholder = document.createElement('div');
    placeholder.className = `spacing-js-placeholder-${item}`;
    placeholder.style.position = 'absolute';
    placeholder.style.zIndex = `${zIndex - 1}`;
    placeholder.style.pointerEvents = 'none';
    placeholder.style.boxSizing = 'border-box';
    placeholder.style.display = 'none';
    SpacingMarker.appendToEl.appendChild(placeholder);
    // 辅助边框
    const subPlaceholder = document.createElement('div');
    subPlaceholder.className = `spacing-js-sub-placeholder-${item}`;
    subPlaceholder.style.position = 'absolute';
    subPlaceholder.style.zIndex = `${zIndex - 1}`;
    subPlaceholder.style.pointerEvents = 'none';
    subPlaceholder.style.boxSizing = 'border-box';
    subPlaceholder.style.display = 'none';
    SpacingMarker.appendToEl.appendChild(subPlaceholder);
  });
}

export function cleanPlaceholder(type: PlaceholderType): void {
  const placeholder: HTMLDivElement | null = SpacingMarker.appendToEl.querySelector(`.spacing-js-placeholder-${type}`);
  placeholder && (placeholder.style.display = 'none');
  const subPlaceholder: HTMLDivElement | null = SpacingMarker.appendToEl.querySelector(
    `.spacing-js-sub-placeholder-${type}`,
  );
  subPlaceholder && (subPlaceholder.style.display = 'none');
}
